<template>
	<sw-common-frame :loading="loading">
		<el-tabs slot="tabs" type="card" class="custom_top" addable v-model="activeName" @tab-add="handleOpenTypeForm()">
			<el-tab-pane v-for="item in configEnum" :key="item.id" :name="item.id">
				<template slot="label">
					{{ item.deName }}
					<el-dropdown size="medium" placement="bottom-end" @command="handleDropdownCommand">
						<i class="el-icon-arrow-down el-icon--right"></i>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item icon="el-icon-edit" :command="{ type: 'edit', data: item }">编辑</el-dropdown-item>
							<el-dropdown-item icon="el-icon-delete" :command="{ type: 'delete', data: item }">删除</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</el-tab-pane>
		</el-tabs>
		<template slot="button">
			<el-button size="small" type="primary" icon="el-icon-plus" @click="handleOpenDialog()">新增</el-button>
		</template>
		<template slot="query">
			<el-form size="small" inline>
				<el-form-item><el-input v-model="queryData.name" clearable placeholder="请输入配置名称"></el-input></el-form-item>
				<el-form-item><el-button type="primary" @click="queryTableData">查询</el-button></el-form-item>
			</el-form>
		</template>
		<template slot="table">
			<el-table size="medium" :data="tableData" stripe height="100%">
				<el-table-column type="index" label="序号" align="center" width="48"></el-table-column>
				<el-table-column prop="name" label="配置名称" min-width="160"></el-table-column>
				<el-table-column prop="filed13" label="标识" min-width="160"></el-table-column>
				<el-table-column prop="content" label="配置说明" min-width="200"></el-table-column>
				<el-table-column prop="createName" label="创建人" width="120"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
				<el-table-column label="操作" width="90">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" @click="handleOpenDialog(row)">修改</el-button>
						<el-button size="medium" type="text" @click="handleDeleteData(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<template slot="page">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
		</template>
		<dict-form v-model="dictEnumDialog" :dict-id="dictDefineId" :data-id="dictDetailId" @refresh="getDictEnumData()"></dict-form>
		<form-dialog v-model="formDialog" :type="configTypeValue" :data-id="dataId" @refresh="queryTableData()"></form-dialog>
	</sw-common-frame>
</template>

<script>
import formDialog from './form';
import dictForm from './dictForm';
import systemMixins from '@/views/common/systemMixins';
import { getDictDefineList } from '@/api/system/tbSysDictDefinition';
import { queryConfigPageList, deleteConfig } from '@/api/system/tbSysConfig';
import { getDictDetailList, deleteDictDetail } from '@/api/system/tbSysDictDetail';
export default {
	mixins: [systemMixins],
	components: { formDialog, dictForm },
	data() {
		return {
			activeName: '',
			dictDefineId: '',
			dictDetailId: '',
			configEnum: [],
			configData: {},
			configDrawer: false,
			dictEnumDialog: false
		};
	},
	computed: {
		configTypeValue() {
			let info = this.configEnum.find((n) => n.id === this.activeName);
			return !info ? '' : info.deValue;
		}
	},
	watch: {
		configTypeValue(val) {
			this.queryTableData();
		}
	},
	mounted() {
		this.getDictEnumData();
	},
	methods: {
		//获取字典枚举数据
		async getDictEnumData() {
			let params = { page: 1, limit: 1, code: 'SYSTEM_BASE_CONFIG' };
			let result = await getDictDefineList(params).then((res) => res.data);
			if (result.code === '0') {
				let datas = this.$detailData(result.data);
				let dataParams = { page: 1, limit: 9999, dictId: datas.id };
				let dataDetail = await getDictDetailList(dataParams).then((res) => res.data);
				this.dictDefineId = datas.id;
				if (dataDetail.code === '0') {
					this.configEnum = dataDetail.data || [];
					this.activeName = this.configEnum[0].id;
				}
			}
		},

		//获取配置数据
		async getTableData() {
			if (!!this.configTypeValue) {
				let params = { ...this.queryData, type: this.configTypeValue };
				let result = await queryConfigPageList(params).then((res) => res.data);
				if (result.code === '0') {
					this.dataCount = parseInt(result.count);
					this.tableData = result.data || [];
				}
			}
		},

		//删除敏感词数据
		handleDeleteData(data) {
			let params = { ...data, label: '' };
			this.handleDeleteFunction(data.id, data.name, '配置');
		},

		//删除请求
		async deleteDataRequest(params) {
			let result = await deleteConfig(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除成功');
			}
		},

		handleDropdownCommand(rows) {
			let id = rows.data.id;
			if (rows.type === 'edit') {
				this.handleOpenTypeForm(id);
			} else if (rows.type === 'delete') {
				this.handleDeleteConfigType(id);
			}
		},

		//添加配置类型
		handleOpenTypeForm(id) {
			this.dictDetailId = id;
			this.dictEnumDialog = true;
		},

		//删除配置类型
		handleDeleteConfigType(id) {
			let that = this;
			that.$confirm('此操作将永久删除该配置类型, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteConfigTypeRequest(id);
						instance.confirmButtonLoading = false;
					}
					done();
				}
			});
		},

		//删除配置类型请求
		async deleteConfigTypeRequest(id) {
			let result = await deleteDictDetail(id).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('删除配置类型成功');
				this.getDictEnumData();
			}
		}
	}
};
</script>
